<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";

// -----------------------------------------------------------------------------
// 访问设置
// -----------------------------------------------------------------------------

if (!isset($_POST["keyword"])) {
    exit("需要传入有效的参数！");
}

$keyword = $_POST["keyword"];

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>搜索结果</title>
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
    <base target="_self">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!-- div container start -->
<div class="container container-fluid mt-3 mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a>
                </li>
                <li class="breadcrumb-item active">
                    <a class="text-decoration-none" href="index.php">搜索</a>
                </li>
                <li class="breadcrumb-item active">搜索结果 - <span class="text-danger"><?php echo $keyword; ?></span></li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <div class="mt-2">
        <select id="selectSearchArea" class="form-select">
            <option value="specificDate" selected>当日</option>
            <option value="finished">已完成</option>
            <option value="daily">每日重复</option>
            <option value="weekly">每周重复</option>
            <option value="monthly">每月重复 - 阳历</option>
            <option value="monthlyLunar">每月重复 - 农历</option>
            <option value="yearly">每年重复 - 阳历</option>
            <option value="yearlyLunar">每年重复 - 农历</option>
            <option value="storageBox">待办事务收纳箱</option>
            <option value="shoppingList">购物清单</option>
            <option value="summariesAndPlans">总结与规划</option>
            <option value="goals">目标</option>
        </select>
    </div>

    <div class="mt-2" id="list"></div>

</div>
<!-- div container end -->

<!-- ----------------------------------------------------------------------- -->

<script>

    function search(keyword, tableName) {
        var url = `generateListOfSearchResult.php?tableName=${tableName}&keyword=${keyword}`
        $.get(url)
            .done(function(data ) {
                $("#list").html(data)
            })
            .fail(function () {
                alert("获取搜索结果列表失败。")
            });
    }

</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    // 网页加载时执行

    var keyword = "<?php echo $keyword; ?>"
    // 获取「此前指定过的搜索区域」
    var tableName = localStorage.getItem("tableName")

    $(function() {

        if (tableName == null) {
            // 此前没有指定过搜索区域，默认搜索区域为「当日」
            tableName = "specificDate"
            localStorage.setItem("tableName", tableName)

            // 变更「下拉框的当前选中项」
            $("#selectSearchArea").val("specificDate")
        } else {
            // 此前已经指定过搜索区域，在该搜索区域中搜索
            tableName = localStorage.getItem("tableName")

            // 变更「下拉框的当前选中项」
            $("#selectSearchArea").val(tableName)
        }

        search(keyword, tableName)

    })

</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    $("#selectSearchArea").on("change", function () {
        tableName = this.value
        search(keyword, tableName)
        // 记录已经选择的搜索区域，以便从其他页面返回当前页面时，自动搜索已经选中的搜索区域
        localStorage.setItem("tableName", tableName)
    })
</script>

<!-- ----------------------------------------------------------------------- -->

<!-- 添加「返回顶部按钮」 -->
<script src="../resources/vanilla-back-to-top/index.js"></script>
<script src="../resources/vanilla-back-to-top/config.js"></script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
